<template>
	<view class="page">
		<!--<z-nav-bar></z-nav-bar>-->
		<!-- 公共组件-每个页面必须引入 -->
		<!--<public-module></public-module>-->
		<swiper ref="swiper" class="swiper" :duration="500" :current="current" vertical :disable-touch="true">
			<!-- 基本信息 -->
			<swiper-item catchtouchmove="catchTouchMove">
				<view class="title">忘记密码(1/3)</view>
				<view class="tips">通过验证绑定手机号找回密码</view>
				<!-- <input type="text" v-model="phone" class="uni-input-border" placeholder="请输入手机号" /> -->
				<button type="primary" class="btn"  open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">绑定手机号</button>
				<!-- <button type="primary" class="btn"   :disabled="disabled1"  @click="next">下一步</button> -->
			</swiper-item>

			<swiper-item catchtouchmove="catchTouchMove">
				<view class="title">忘记密码(2/3)</view>
				<view class="tips">已将验证码发送至手机号：<text class="phone">15213080</text> </view>
				<input type="text" v-model="code" class="uni-input-border" placeholder="请输入验证码" />
				<button  :disabled="disabled2"  type="primary" class="btn" @click="next">下一步</button>
			</swiper-item>

			<swiper-item catchtouchmove="catchTouchMove">
				<view class="title">忘记密码(3/3)</view>
				<view class="tips">请设置您的新密码（6~20位）</view>
				<input type="text" v-model="code" class="uni-input-border" placeholder="请输入手机号" />
				<input type="text" v-model="code" class="uni-input-border" placeholder="请输入手机号" />
				<button  :disabled="disabled2"  type="primary" class="btn" @click="next">确认重置</button>
			</swiper-item>
		</swiper>
		>
	</view>
</template>
<script>
	import md5 from '@/plugins/md5';
	var clear;
	export default {
		data() {
			return {
				current:0,
				//手机
				phone:'',
				//邮箱
				email: '',
				// 密码
				password: '',
				//验证码
				code: '',
				//确认密码
				confirmPassword: '',
				//验证码
				codeText: '获取验证码',
				//验证码已发
				readonly: false,
			};
		},
		computed:{
			disabled1(){
				return !this.$base.phoneRegular.test(this.phone)
			},
			disabled2(){
				return  !(this.code.trim().length > 0)
			}
		},
		//第一次加载
		onLoad(e) {},
		//页面显示
		onShow() {},
		//方法
		methods: {
			onGetPhoneNumber(e){
				   if(e.detail.errMsg=="getPhoneNumber:fail user deny"){       //用户决绝授权  
				
				            //拒绝授权后弹出一些提示  
				
				        }else{      //允许授权  
				            console.log(e.detail.encryptedData)  
				            e.detail.encryptedData      //加密的用户信息  
				            e.detail.iv     //加密算法的初始向量  时要用到  
				        }  
			},
			//获取验证码
			getCode() {
				if (this.readonly) {
					uni.showToast({
						title: '验证码已发送',
						icon: 'none'
					});
					return;
				}
				if (!this.email) {
					uni.showToast({
						title: '请输入邮箱',
						icon: 'none'
					});
					return;
				}
				if (!this.$base.mailRegular.test(this.email)) {
					uni.showToast({
						title: '请输入正确的邮箱',
						icon: 'none'
					});
					return;
				}
				this.$http
					.post('api/common/v1/send_sms', {
						email: this.email,
						type: 3000
					})
					.then(res => {
						this.getCodeState();
					});
			},
			//验证码按钮文字状态
			getCodeState() {
				const _this = this;
				this.readonly = true;
				this.codeText = '60S后重新获取';
				var s = 60;
				clear = setInterval(() => {
					s--;
					_this.codeText = s + 'S后重新获取';
					if (s <= 0) {
						clearInterval(clear);
						_this.codeText = '获取验证码';
						_this.readonly = false;
					}
				}, 1000);
			},
			onSubmit() {
			},
			next(form) {
				console.log(1)
				this.current = this.current+1
			},
		},
		//页面隐藏
		onHide() {},
		//页面卸载
		onUnload() {},
		//页面下来刷新
		onPullDownRefresh() {},
		//页面上拉触底
		onReachBottom() {},
		//用户点击分享
		onShareAppMessage(e) {
			return this.wxShare();
		}
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	.page {
		background-color: #ffffff;
		padding: 0 65upx;
		min-height: 100vh;

		.swiper {
			margin-top: 10px;
			height: calc(100vh - 88px);

			.title {
				font-family: PingFangSC;
				font-size: 48upx;
				color: #323232;
			}

			.tips {
				margin-top: 32upx;
				font-size: 30upx;
				color: #969696;

				.phone {
					color: #81B435;
				}
			}

			.uni-input-border {
				margin-top: 80upx;
				padding: 0 10px;
				height: 49px;
				width: 100%;
				font-size: 14px;
				background-color: #F1F1F1;
				color: #666;
				border: 0;
				border-radius: 49px;
				box-sizing: border-box;
			}

			.btn {
				margin-top: 80upx;
				background-color: $uni-theme-color;
				border-radius: 30px;
			}

		}
	}
</style>
